<template>
  <div>
    <div class="category" v-show="!change">
      <span>{{ classic.name }}</span>
      <div>
        <i
          v-show="classic.name !== '题解'"
          class="ok iconfont icon-gengxin"
          @click="ischange"
        ></i>
        <i
          v-show="classic.name !== '题解'"
          class="delete iconfont icon-shanchu"
          @click="deleteCategory"
        ></i>
      </div>
    </div>
    <div v-show="change">
      <n-input
        v-model:value="classic.name"
        type="text"
        placeholder="请输入分类标题"
      >
        <template #suffix>
          <i class="ok iconfont icon-wancheng" @click="updateCategory"></i>
          <i class="err iconfont icon-chacha" @click="ischange"></i>
        </template>
      </n-input>
    </div>
  </div>
</template>

<script>
import { updateCategoryAPI, deleteCategoryAPI } from "@/api/ojAPI/ojAPI";
import { ElMessage } from "element-plus";
export default {
  props: {
    classic: {
      type: Object,
      default: {},
    },
  },
  data() {
    return {
      change: false,
      deboundTime: null,
    };
  },

  mounted() {},

  methods: {
    //将文本框显示出来
    ischange() {
      this.change = !this.change;
    },
    //更新分类名称
    async updateCategory() {
      await updateCategoryAPI(this.classic).then((res) => {
        this.$emit("updateCategory");
        if (res.data.code === 200) {
          ElMessage.success("更新分类成功");
          this.category = res.data.data;
        }
      });
      this.ischange();
    },
    deleteCategory() {
      if (this.deboundTime) {
        clearTimeout(this.deboundTime);
      }
      this.deboundTime = setTimeout(() => {
        this.deleteCategoryAPI();
      }, 300);
    },
    async deleteCategoryAPI() {
      let data = new FormData();
      data.append("categoryId", this.classic.id);
      await deleteCategoryAPI(data).then((res) => {
        if (res.data.code === 200) {
          ElMessage.success("删除分类成功");
          this.$emit("updateCategory");
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.category {
  display: flex;
  justify-content: space-between;
  align-items: center;

  span {
    height: 30px;
    font-size: 14px;
    padding: 0px 10px;
    margin-bottom: 5px;
    line-height: 250%;
  }
}
.iconfont {
  cursor: pointer;
}

.ok:hover {
  cursor: pointer;
  color: #18a058;
}
.delete:hover {
  cursor: pointer;
  color: crimson;
}
.err:hover {
  color: crimson;
}
</style>
